<page-header
  ng-if="ctrl.state.viewReady"
  title="'Namespace access management'"
  breadcrumbs="[
    { label:'Namespaces', link:'kubernetes.resourcePools' },
    {
      label:ctrl.pool.Namespace.Name,
      link: 'kubernetes.resourcePools.resourcePool',
      linkParams:{id: ctrl.pool.Namespace.Name}
    },
     'Access management'
     ]"
  reload="true"
>
</page-header>

<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>

<div ng-if="ctrl.state.viewReady">
  <div class="row" ng-if="ctrl.pool">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-header icon="layers" title-text="Namespace"></rd-widget-header>
        <rd-widget-body>
          <table class="table">
            <tbody>
              <tr>
                <td class="!pl-0">Name</td>
                <td>
                  {{ ctrl.pool.Namespace.Name }}
                </td>
              </tr>
            </tbody>
          </table>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <rd-widget ng-if="ctrl.availableUsersAndTeams">
        <rd-widget-header icon="user-x" title-text="Create access"></rd-widget-header>
        <rd-widget-body>
          <form class="form-horizontal">
            <div class="form-group">
              <div
                ng-if="!ctrl.isRBACEnabled"
                class="small mx-[15px] mb-6 flex gap-1 rounded-lg border border-solid border-warning-5 bg-warning-2 p-4 text-warning-8 th-highcontrast:bg-yellow-11 th-highcontrast:text-white th-dark:bg-yellow-11 th-dark:text-white"
              >
                <div class="mt-0.5">
                  <pr-icon icon="'alert-triangle'" feather="true" class-name="'text-warning-7 th-dark:text-white th-highcontrast:text-white'"></pr-icon>
                </div>
                <div>
                  <p> Your cluster does not have Kubernetes role-based access control (RBAC) enabled. </p>
                  <p> This means you can't use Portainer RBAC functionality to regulate access to environment resources based on user roles. </p>
                  <p class="mb-0">
                    To enable RBAC, start the&nbsp;<a
                      class="th-highcontrast:text-blue-4 th-dark:text-blue-7"
                      href="https://kubernetes.io/docs/concepts/overview/components/#kube-apiserver"
                      target="_blank"
                      >API server</a
                    >&nbsp;with the&nbsp;<code class="bg-gray-4 box-decoration-clone th-highcontrast:bg-black th-dark:bg-black">--authorization-mode</code>&nbsp;flag set to a
                    comma-separated list that includes&nbsp;<code class="bg-gray-4 th-highcontrast:bg-black th-dark:bg-black">RBAC</code>, for example:&nbsp;
                    <code class="bg-gray-4 box-decoration-clone th-highcontrast:bg-black th-dark:bg-black">kube-apiserver --authorization-mode=Example1,RBAC,Example2</code>.
                  </p>
                </div>
              </div>
              <span class="col-sm-12 small text-warning">
                <p class="vertical-center">
                  <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
                  Adding user access will require the affected user(s) to logout and login for the changes to be taken into account.
                </p>
              </span>
            </div>
            <div class="form-group">
              <label class="col-sm-3 col-lg-2 control-label text-left" for="users-selector"> Select user(s) and/or team(s) </label>
              <div class="col-sm-9 col-lg-4">
                <span class="small text-muted" ng-if="ctrl.availableUsersAndTeams.length === 0">
                  No user nor team access has been set on the environment. Head over to the
                  <a ui-sref="portainer.endpoints">Environments view</a> to manage them.
                </span>
                <namespace-access-users-selector
                  ng-if="ctrl.availableUsersAndTeams.length > 0"
                  input-id="users-selector"
                  value="ctrl.formValues.multiselectOutput"
                  options="ctrl.availableUsersAndTeams"
                  on-change="(ctrl.onUsersAndTeamsChange)"
                ></namespace-access-users-selector>
              </div>
            </div>

            <!-- actions -->
            <div class="form-group">
              <div class="col-sm-12">
                <button
                  type="submit"
                  class="btn btn-primary btn-sm vertical-center !ml-0"
                  ng-disabled="ctrl.formValues.multiselectOutput.length === 0 || ctrl.actionInProgress"
                  ng-click="ctrl.authorizeAccess()"
                  button-spinner="ctrl.actionInProgress"
                >
                  <span class="vertical-center" ng-hide="ctrl.state.actionInProgress"><pr-icon icon="'plus'" class="vertical-center"></pr-icon> Create access</span>
                  <span ng-show="ctrl.state.actionInProgress">Creating access...</span>
                </button>
              </div>
            </div>
            <!-- !actions -->
          </form>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>

  <namespace-access-datatable ng-if="ctrl.authorizedUsersAndTeams" dataset="ctrl.authorizedUsersAndTeams" on-remove="(ctrl.unauthorizeAccess)"> </namespace-access-datatable>
</div>
